<template>
	<!-- 底部footer组件 -->
	<div class="group_footer">
		<footer>
			<div class="markets" @click="select(1)">
				<img v-if="selectIndexs===1" src="../assets/images/groups/hot_acgtiv.png" alt="" />
				<img v-if="selectIndexs===2" src="../assets/images/groups/hot.png" alt="" />
				<p :class="{blue:selectIndexs===1}">一键营销</p>
			</div>
			<div class="projects" @click="select(2)">
				<img v-if="selectIndexs===1" src="../assets/images/groups/food.png" alt="" />
				<img v-if="selectIndexs===2" src="../assets/images/groups/food_activ.png" alt="" />
				<p :class="{blue:selectIndexs===2}">项目管理</p>
			</div>
		</footer>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { XHeader, Tab, TabItem } from 'vux';
	export default {
		name: 'group_footer',
		data() {
			return {
				selectIndexs: 1, //1-一键营销  2-项目管理
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem
		},
		computed: {
			
		},
		created() {
			if(getCookie('bar_index')){
				this.selectIndexs = +getCookie('bar_index');
				removeCookie('bar_index');
			}
		},
		methods: {
			select(id){		
				this.selectIndexs = id;
				if(id === 1){					
					this.$router.push('/entrance');
					removeCookie('bar_index');
				}else if(id === 2){					
					this.$router.push('/groupList');
				}
				this.$emit('select-type',id);
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.group_footer {
		footer{
			width: 7.5rem;
			height: .9rem;
			background: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 9999;
			display: flex;
			justify-content: space-around;	
			align-items: center;		
			box-shadow: 0 -2px 0 0 #eee;
			-webkit-box-shadow: 0 -2px 0 0 #eee;
			.markets,.projects{
				display: flex;
				flex-flow: column;
				align-items: center;
				img{
					width: .38rem;
					height: .38rem;
				}	
				p{
					font-size: .2rem;
					color: #9d9d9d;
				}
			}	
			.blue{
				color: #45c8b9!important;
			}		
		}
	}
</style>